<template>
	<view class="top-bar">
		<!-- #ifdef MP-WEIXIN -->
		<view class="icon-font-css" v-if="icon" :class="{'icon-color':colorBlack}">
			<text class="iconfont icon-zuojiantou" @tap="backPriviouPage"></text>
			|
			<text class="iconfont icon-zhuye" @tap="backHomePage"></text>
		</view>
		<!-- #endif -->
		<view class="app-title" :style="{color:textColor}">{{appname}}</view>
	</view>
</template>

<script>
	export default {
		props:{
			appname:String,
			icon:Boolean,
			textColor:String,
			colorBlack:Boolean,
		},
		name:"navbar",
		data() {
			return {
				
			};
		},
		methods:{
			
			backPriviouPage(){
				uni.navigateBack()
			},
			backHomePage(){
				uni.navigateTo({
					url:'../../pages/index/index'
				})
			}
		}
		
	}
</script>

<style scoped>
.top-bar{
	position: relative;
	width: 100%;
	height: 75px;
	font-size: 16px;
	line-height: 80px;
	text-align: center;
	color: black;
	/* top:var(--status-bar-height); */
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-font-css{
	position: absolute;
	width: 90px;
	height: 31px;
	left: 8px;
	top:var(--status-bar-height);
	color: white;
	background: rgba(0,0,0,0.4);
	line-height: 31px;
	border-radius: 15px;
	display: flex;
	justify-content: space-evenly;
}

.icon-color{
	color: black;
	background: white;
	border: 1px #eaeaea solid;
}

.app-title{
	width: 40vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space:nowrap;
}

</style>
